<script setup>
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'

// 定义卡片数据
const cardData = [
  {
    id: 1,
    title: '研发',
    icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z',
    colorTheme: {
      from: 'blue',
      via: 'purple',
      to: 'pink',
      iconColor: 'blue'
    },
    tags: ['研报解读_自免', '研报解读_肿瘤']
  },
  {
    
    id: 2,
    title: '财务',
    icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
    colorTheme: {
      from: 'blue',
      via: 'purple',
      to: 'pink',
      iconColor: 'blue'
    },
    tags: ['财务报销制度']
  },
  {
    id: 3,
    title: '党建',
    icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
    colorTheme: {
      from: 'blue',
      via: 'purple',
      to: 'pink',
      iconColor: 'blue'
    },
    tags: ['网络强国指示要求', '新质生产力指示精神']
  },
  {
    id: 4,
    title: '智数',
    icon: 'M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z',
    colorTheme: {
      from: 'blue',
      via: 'purple',
      to: 'pink',
      iconColor: 'blue'
    },
    tags: ['IT通用知识', '开发运维技术']
  },
  {
    id: 5,
    title: '其他',
    icon: 'M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z',
    colorTheme: {
      from: 'blue',
      via: 'purple',
      to: 'pink',
      iconColor: 'blue'
    },
    tags: ['月度会议回顾', '数字经济探索']
  }
]

// 修改分类数据结构，添加子项
const categories = ref([
  { 
    id: 'research',
    name: '研发',
    count: 8,
    icon: 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z',
    description: '研发相关的文档和研报解读',
    items: [
      { id: 1, title: '白免药物的技术发展方向', description: '详细分析白免药物技术发展趋势', date: '2024-03-15', type: '研报解读' },
      { id: 2, title: '国内白免药物布局分析', description: '国内主要公司白免药物研发现状', date: '2024-03-14', type: '行业分析' },
      { id: 3, title: '免疫治疗最新进展', description: '免疫治疗领域的突破性发现', date: '2024-03-13', type: '前沿进展' },
      { id: 4, title: '肿瘤治疗新方向', description: '肿瘤治疗的创新疗法研究', date: '2024-03-12', type: '研究报告' },
      { id: 5, title: '新药研发流程指南', description: '完整的新药研发流程文档', date: '2024-03-11', type: '技术文档' },
      { id: 6, title: '临床试验设计方法', description: '科学的临床试验设计指南', date: '2024-03-10', type: '方法论' },
      { id: 7, title: '药物筛选技术进展', description: '最新药物筛选技术综述', date: '2024-03-09', type: '技术综述' },
      { id: 8, title: '新药注册法规更新', description: '最新的药品注册法规解读', date: '2024-03-08', type: '政策解读' }
    ]
  },
  { 
    id: 'finance',
    name: '财务',
    count: 6,
    icon: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
    description: '财务相关制度和报销指南',
    items: [
      { id: 9, title: '差旅费报销指南', description: '最新差旅费报销流程和标准', date: '2024-03-13', type: '制度文件' },
      { id: 10, title: '预算管理制度', description: '部门预算编制和管理规范', date: '2024-03-12', type: '管理制度' },
      { id: 11, title: '发票管理规定', description: '发票获取与报销规定详解', date: '2024-03-11', type: '规章制度' },
      { id: 12, title: '财务报表解读', description: '财务报表阅读和分析方法', date: '2024-03-10', type: '培训资料' },
      { id: 13, title: '资金支付流程', description: '公司资金支付审批流程', date: '2024-03-09', type: '操作指南' },
      { id: 14, title: '税收政策汇编', description: '相关税收政策及优惠政策', date: '2024-03-08', type: '政策文件' }
    ]
  },
  {
    id: 'party',
    name: '党建',
    count: 5,
    icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
    description: '党建工作相关文件',
    items: [
      { id: 15, title: '党建工作计划', description: '2024年度党建工作计划', date: '2024-03-15', type: '工作计划' },
      { id: 16, title: '组织生活制度', description: '党组织生活开展指南', date: '2024-03-14', type: '制度文件' },
      { id: 17, title: '主题教育方案', description: '主题教育活动实施方案', date: '2024-03-13', type: '活动方案' },
      { id: 18, title: '党风廉政建设', description: '党风廉政建设实施细则', date: '2024-03-12', type: '规章制度' },
      { id: 19, title: '党员发展工作', description: '党员发展工作指导手册', date: '2024-03-11', type: '工作手册' }
    ]
  },
  {
    id: 'tech',
    name: '智数',
    count: 7,
    icon: 'M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z',
    description: '智能数字化相关技术文档',
    items: [
      { id: 20, title: 'AI大模型应用实践', description: '企业级AI大模型应用案例', date: '2024-03-15', type: '技术实践' },
      { id: 21, title: '数据治理最佳实践', description: '企业数据治理方法论', date: '2024-03-14', type: '最佳实践' },
      { id: 22, title: '微服务架构设计', description: '现代微服务架构设计指南', date: '2024-03-13', type: '架构设计' },
      { id: 23, title: 'DevOps实施手册', description: 'DevOps流程和工具使用指南', date: '2024-03-12', type: '运维指南' },
      { id: 24, title: '云原生技术概览', description: '云原生相关技术体系介绍', date: '2024-03-11', type: '技术概览' },
      { id: 25, title: '数据安全白皮书', description: '企业数据安全防护策略', date: '2024-03-10', type: '安全文档' },
      { id: 26, title: '低代码平台搭建', description: '企业级低代码平台实践', date: '2024-03-09', type: '平台建设' }
    ]
  },
  {
    id: 'others',
    name: '其他',
    count: 6,
    icon: 'M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z',
    description: '其他重要文档资料',
    items: [
      { id: 27, title: '月度工作总结', description: '2024年3月工作回顾', date: '2024-03-15', type: '工作总结' },
      { id: 28, title: '数字经济发展报告', description: '数字经济发展趋势分析', date: '2024-03-14', type: '研究报告' },
      { id: 29, title: '企业文化手册', description: '公司企业文化建设指南', date: '2024-03-13', type: '文化建设' },
      { id: 30, title: '员工培训计划', description: '2024年度培训规划', date: '2024-03-12', type: '培训资料' },
      { id: 31, title: '行业动态周报', description: '行业重要新闻动态', date: '2024-03-11', type: '新闻动态' },
      { id: 32, title: '质量管理规范', description: '企业质量管理体系文档', date: '2024-03-10', type: '管理规范' }
    ]
  }
])

// 修改当前分类状态，设置为第一个分类
const currentCategory = ref(categories.value[0].id)

// 添加计算属性获取当前分类的子项
const currentItems = computed(() => {
  const category = categories.value.find(c => c.id === currentCategory.value)
  return category ? category.items : []
})

// 修改为普通的 ref，而不是计算属性
const selectedItem = ref(null)

// 修改切换分类的方法
const switchTab = (id, event) => {
  isTabMoving.value = true
  currentCategory.value = id
  
  // 自动选中当前分类的第一个子项
  const firstItem = currentItems.value[0]
  if (firstItem) {
    selectedItem.value = firstItem.id
  }
  
  // 获取点击的按钮位置
  const button = event.currentTarget
  const oldPosition = tabPosition.value
  const newPosition = button.offsetLeft
  
  // 使用 requestAnimationFrame 更新位置
  requestAnimationFrame(() => {
    tabPosition.value = newPosition
    tabWidth.value = button.offsetWidth
  })
  
  // 减少动画时间，优化过渡效果
  setTimeout(() => {
    isTabMoving.value = false
  }, 300)
}

// 修改选择项方法
const selectItem = (id) => {
  selectedItem.value = selectedItem.value === id ? null : id
}

// 在组件挂载时触发第一个标签的点击
onMounted(() => {
  nextTick(() => {
    if (tabRefs.value[0]) {
      switchTab(categories.value[0].id, { currentTarget: tabRefs.value[0] })
    }
  })
})

// 添加分页相关数据
const pageSize = 8
const currentPage = ref(1)

// 添加计算属性
const currentCategoryData = computed(() => 
  categories.value.find(c => c.id === currentCategory.value) || categories.value[0]
)

const currentCategoryIcon = computed(() => currentCategoryData.value.icon)
const currentCategoryTitle = computed(() => currentCategoryData.value.name)
const currentCategoryDescription = computed(() => currentCategoryData.value.description)

// 修改过滤逻辑
const filteredItems = computed(() => {
  const category = currentCategoryData.value
  return category.id === 'all' 
    ? categories.value.flatMap(c => c.items)
    : category.items
})

// 添加更多卡片判断
const hasMoreCards = computed(() => {
  return false // 暂时禁用加载更多功能
})

// 添加当前数量和总数
const currentCount = computed(() => filteredItems.value.length)
const totalCount = computed(() => cardData.length)

// 添加加载更多方法
const loadMore = () => {
  currentPage.value++
}

// 当切换分类时重置页码
watch(currentCategory, () => {
  currentPage.value = 1
})

// 在 script setup 中添加
const tabPosition = ref(0)
const tabWidth = ref(0)
const tabRefs = ref([])
const isTabMoving = ref(false)

// 添加随机渐变色函数
const gradients = [
  'rgba(219,234,254,0.3), rgba(191,219,254,0.2)',
  'rgba(224,231,255,0.3), rgba(199,210,254,0.2)',
  // ... 其他渐变色
]

const getRandomGradient = () => {
  const index = Math.floor(Math.random() * gradients.length)
  return gradients[index]
}

// 搜索框的输入值
const searchInput = ref('')

// 热门对话数据结构
const hotSearchData = {
  title: '热门对话',
  icon: '🔥',
  items: [
    {
      id: 'h1',
      title: '白免药物的技术发展方向是什么？',
      category: '研发',
      type: 'research',
      hot: 9876
    },
    {
      id: 'h2',
      title: '国内有哪些公司布局白免药物？',
      category: '研发',
      type: 'research',
      hot: 8765
    },
    {
      id: 'h3',
      title: '原发性胆汁性肝硬化的临床治疗方案？',
      category: '研发',
      type: 'research',
      hot: 7654
    },
    {
      id: 'h4',
      title: '新药研发流程指南有哪些要点？',
      category: '研发',
      type: 'research',
      hot: 6543
    },
    {
      id: 'h5',
      title: '临床试验设计方法的关键步骤？',
      category: '研发',
      type: 'research',
      hot: 5432
    },
    {
      id: 'h6',
      title: '药物筛选技术最新进展有哪些？',
      category: '研发',
      type: 'research',
      hot: 4321
    }
  ]
}


// 热门搜索数据
const hotSearchItems = ref(hotSearchData.items)

// 添加换一批功能
const refreshHotItems = () => {
  hotSearchItems.value = [...hotSearchData.items]
    .sort(() => Math.random() - 0.5)
    .slice(0, 6)
}

// 修改点击热门搜索项的处理函数
const handleHotItemClick = (item) => {
  searchInput.value = item.title
}

// 修改水波纹效果函数
const createRipple = (event) => {
  const button = event.currentTarget
  const ripple = document.createElement('div')
  
  const x = event.touches ? event.touches[0].clientX : event.clientX
  const y = event.touches ? event.touches[0].clientY : event.clientY
  
  const rect = button.getBoundingClientRect()
  const left = x - rect.left
  const top = y - rect.top
  
  ripple.style.left = `${left}px`
  ripple.style.top = `${top}px`
  ripple.className = 'ripple'
  
  const oldRipple = button.querySelector('.ripple')
  if (oldRipple) {
    oldRipple.remove()
  }
  
  button.appendChild(ripple)
  
  ripple.addEventListener('animationend', () => {
    ripple.remove()
  })
}

const isSidebarOpen = ref(window.innerWidth >= 1024) // 初始状态根据屏幕宽度决定
const isLargeScreen = ref(window.innerWidth >= 1024)

// 监听窗口大小变化
const handleResize = () => {
  isLargeScreen.value = window.innerWidth >= 1024
  isSidebarOpen.value = isLargeScreen.value
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const toggleSidebar = () => {
  isSidebarOpen.value = !isSidebarOpen.value
}

// 侧边栏菜单数据
const menuData = {
  main: [
    {
      id: 'ai_chat',
      title: 'AI智能对话',
      icon: '👾',
      type: 'main'
    },
    {
      id: 'ai_knowledge',
      title: 'AI知识库',
      icon: '📚',
      type: 'main'
    },
    {
      id: 'ai_tools',
      title: 'AI工具箱',
      icon: '🛠️',
      isOpen: true,
      type: 'main',
      children: [
        {
          id: 'chat',
          title: '智能对话',
          icon: '💬',
          description: '基于大语言模型的智能对话系统'
        },
        {
          id: 'search',
          title: '知识搜索',
          icon: '🔍',
          description: '海量知识库的智能搜索引擎'
        },
        {
          id: 'office',
          title: '办公助手',
          icon: '💼',
          description: '智能文档处理与办公自动化'
        },
        {
          id: 'legal',
          title: '法律助手',
          icon: '⚖️',
          description: '专业的法律咨询与文书处理'
        },
        {
          id: 'translate',
          title: '智能翻译',
          icon: '🌐',
          description: '多语言实时翻译与本地化'
        },
        {
          id: 'writing',
          title: '创作助手',
          icon: '✍️',
          description: '智能写作与内容创作辅助'
        },
        {
          id: 'image',
          title: '图像处理',
          icon: '🖼️',
          description: 'AI图像生成与智能处理'
        },
        {
          id: 'audio',
          title: '语音助手',
          icon: '🎵',
          description: '语音识别与音频处理'
        },
        {
          id: 'video',
          title: '视频工具',
          icon: '🎬',
          description: '智能视频编辑与处理'
        },
        {
          id: 'vr',
          title: '虚拟现实',
          icon: '🥽',
          description: 'VR内容创作与体验'
        },
        {
          id: 'data',
          title: '数据分析',
          icon: '📊',
          description: '智能数据处理与可视化'
        },
        {
          id: 'code',
          title: '代码助手',
          icon: '💻',
          description: '智能编程辅助与代码生成'
        }
      ]
    }
  ]
}

// 修改菜单展开状态管理
const openMenus = ref({
  ai_tools: true  // 默认展开 AI 工具箱
})

// 切换菜单展开状态
const toggleMenu = (menuKey) => {
  openMenus.value[menuKey] = !openMenus.value[menuKey]
}

</script>

<template>
  <!-- 右侧主内容 --> 
  <div>
    <!-- 顶部搜索区域 -->
    <div class="pt-8 pb-4 text-center relative">
    <!-- 背景光效 -->
    <div class="absolute inset-0 -z-10">
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[500px] bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 rounded-full blur-3xl"></div>
    </div>

    <!-- 标题区域 -->
    <div class="flex items-center justify-center mb-2">
        <h1 class="text-5xl font-bold tracking-tight">
        <span class="bg-gradient-to-r from-blue-600 via-purple-500 to-pink-500
            group-hover:from-indigo-600 group-hover:via-blue-600 group-hover:to-sky-500
            inline-block text-transparent bg-clip-text
            transition-all duration-500
            drop-shadow-[0_2px_10px_rgba(96,165,250,0.3)]
            relative
            after:content-[''] after:absolute after:inset-0 
            after:bg-gradient-to-r after:from-blue-400/20 after:via-purple-400/20 after:to-pink-400/20
            after:blur-2xl after:transform after:scale-150">
            智能
        </span>
        <span class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500
            group-hover:from-blue-600 group-hover:via-indigo-600 group-hover:to-sky-500
            inline-block text-transparent bg-clip-text ml-2
            transition-all duration-500
            drop-shadow-[0_2px_10px_rgba(96,165,250,0.3)]
            relative
            after:content-[''] after:absolute after:inset-0 
            after:bg-gradient-to-r after:from-indigo-400/20 after:via-purple-400/20 after:to-pink-400/20
            after:blur-2xl after:transform after:scale-150">
            知识库
        </span>
        </h1>
    </div>

    <!-- 副标题 -->
    <p class="text-lg mb-1">
        阅书万卷，我是你的
        <span class="bg-gradient-to-r from-blue-500/80 via-purple-400/80 to-pink-400/80
        group-hover:from-indigo-500/80 group-hover:via-blue-500/80 group-hover:to-sky-400/80
        inline-block text-transparent bg-clip-text font-medium
        transition-all duration-500
        drop-shadow-[0_1px_5px_rgba(96,165,250,0.2)]
        relative
        after:content-[''] after:absolute after:inset-0 
        after:bg-gradient-to-r after:from-blue-400/10 after:via-purple-400/10 after:to-pink-400/10
        after:blur-xl after:transform after:scale-150">
        智能助手
        </span>
    </p>
    </div>

    <!-- 搜索框 -->
    <div class="max-w-4xl mx-auto px-4 mb-6">
    <div class="flex gap-3">
        <div class="flex-1 relative group">
        <input 
            v-model="searchInput"
            type="text" 
            placeholder="创作无限可能，一念形成" 
            class="w-full px-6 py-4 rounded-xl bg-white/90 backdrop-blur-xl 
            border-2 border-gray-100 focus:border-blue-400/50 
            focus:ring-4 focus:ring-blue-400/20 outline-none 
            text-gray-700 placeholder-gray-400 
            transition-all duration-300 group-hover:bg-white shadow-lg"
        >
        <div class="absolute right-4 top-1/2 -translate-y-1/2 flex items-center space-x-2">
            <button class="p-2 hover:bg-white/10 rounded-lg transition-colors">
            <svg class="w-5 h-5 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
            </button>
        </div>
        </div>
        <button class="px-8 py-4 bg-gradient-to-r from-blue-500 to-blue-600 
        text-white rounded-xl transition-all duration-300 
        shadow-lg hover:shadow-blue-500/25 font-medium 
        whitespace-nowrap">
        开始对话
        </button>
        <button class="px-8 py-4 bg-white/90 text-gray-600 hover:text-gray-800 
        rounded-xl transition-all duration-300 backdrop-blur-xl 
        border-2 border-gray-100 font-medium
        whitespace-nowrap">
        文档入库
        </button>
    </div>
    </div>

    <!-- 分类卡片区域 -->
    <div class="max-w-7xl mx-auto px-4 mt-2">
    <!-- Tab 导航栏 -->
    <div class="mb-6">
        <div class="flex items-center relative space-x-1.5 bg-white/50 backdrop-blur-sm p-1.5 rounded-2xl border border-white/40
        shadow-sm shadow-white/20">
        <!-- 背景动画滑块 -->
        <div class="absolute h-[calc(100%-10px)] top-[5px] transition-transform duration-300 ease-out will-change-transform"
            :style="{
            transform: `translateX(${tabPosition}px)`,
            width: `${tabWidth - 4}px`,
            }"
        >
            <!-- 选中状态背景 -->
            <div class="absolute inset-0 transition-all duration-300 will-change-transform"
            :style="{
                transform: `scale(${isTabMoving ? 1.02 : 1})`,
                borderRadius: '9999px',
                background: 'linear-gradient(135deg, rgba(199,225,254,0.98), rgba(147,197,253,0.95))',
                boxShadow: `
                0 4px 12px rgba(59,130,246,0.2),
                0 2px 4px rgba(59,130,246,0.15),
                inset 0 0 0 1.5px rgba(255,255,255,0.7),
                inset 0 1px 0 rgba(255,255,255,0.9)
                `
            }">
            <!-- 银白色边框效果 -->
            <div class="absolute -inset-[1px] rounded-full bg-gradient-to-b from-white/50 to-white/30 opacity-90"></div>
            </div>

            <!-- 选中状态的光效 -->
            <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
            <div class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-400/30 via-transparent to-blue-400/30"></div>
            </div>
        </div>

        <!-- Tab 按钮 -->
        <button v-for="category in categories" :key="category.id"
            ref="tabRefs"
            @click="switchTab(category.id, $event)"
            class="relative flex items-center px-6 py-2.5 rounded-full transition-all duration-500
            font-medium text-sm whitespace-nowrap outline-none focus:outline-none group/tab" 
            :class="currentCategory === category.id ? 
            'text-blue-800' : 
            'text-gray-500 hover:text-gray-600'">
            
            <!-- 图标 - 移除旋转效果 -->
            <div class="relative z-10 mr-2.5 transition-all duration-500 transform" 
            :class="currentCategory === category.id ? 
                'text-blue-700 translate-x-0.5 scale-110' : 
                'text-gray-400 group-hover/tab:scale-105 group-hover/tab:translate-x-0.5'">
            <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path :d="category.icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
            </svg>
            </div>
            
            <!-- 文字和数量 -->
            <span class="relative z-10 font-medium transition-all duration-500 transform"
            :class="currentCategory === category.id ? 
                'text-blue-800 translate-x-1 font-semibold scale-105' : 
                'text-gray-600 group-hover/tab:translate-x-0.5'">
            {{ category.name }}
            </span>
            <span class="relative z-10 ml-2 text-xs px-2.5 py-0.5 rounded-full transition-all duration-500 transform" 
            :class="currentCategory === category.id ? 
                'bg-blue-200 text-blue-700 translate-x-1 scale-105 shadow-sm' : 
                'bg-gray-50 text-gray-400 group-hover/tab:translate-x-0.5 group-hover/tab:bg-gray-100'">
            {{ category.count }}
            </span>
        </button>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="flex-1 overflow-hidden">
        <div class="h-full overflow-y-auto">
        <!-- 文档列表 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            <!-- 单个文档卡片 -->
            <div v-for="(item, index) in filteredItems" :key="item.id"
            @click="selectItem(item.id)"
            class="group bg-white/60 backdrop-blur-md rounded-xl p-4
            relative cursor-pointer overflow-hidden
            transition-all duration-300 ease-out">
            
            <!-- 主边框 -->
            <div class="absolute inset-0 rounded-xl border border-white/60"></div>
            
            <!-- 内部玻璃态背景 -->
            <div class="absolute inset-[1px] rounded-[11px] bg-white/40 
                backdrop-blur-md transition-all duration-500"></div>
            
            <!-- 选中状态背景 -->
            <div class="absolute inset-0 transition-all duration-500"
                :class="selectedItem === item.id ? 'opacity-100' : 'opacity-0'">
                <div class="absolute inset-0 bg-[rgba(147,197,253,0.9)] rounded-xl">
                <div class="absolute -inset-[1px] rounded-xl border-[2.5px] border-white"></div>
                <div class="absolute inset-0 bg-gradient-to-b from-white/50 to-transparent"></div>
                </div>
            </div>
            
            <!-- hover状态背景 -->
            <div class="absolute inset-0 bg-white/40 opacity-0 group-hover:opacity-100 
                transition-all duration-500 rounded-xl"
                :class="{ 'group-hover:opacity-0': selectedItem === item.id }">
            </div>
            
            <!-- 内容区域 -->
            <div class="relative z-10 flex items-center justify-between">
                <h3 class="text-[15px] font-medium transition-colors duration-300 
                line-clamp-2 flex-1 pr-4"
                :class="selectedItem === item.id ? 'text-gray-800' : 'text-gray-600'">
                {{ item.title }}
                </h3>
                
                <!-- 箭头 -->
                <div class="transition-all duration-300 transform flex-shrink-0"
                :class="selectedItem === item.id ? 
                    'opacity-100 translate-x-0' : 
                    'opacity-0 translate-x-2 group-hover:opacity-100 group-hover:translate-x-0'">
                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    </div>

    <!-- 热门对话 -->
    <div class="max-w-7xl mx-auto px-4 mt-8 mb-8">
    <div class="group bg-white/70 backdrop-blur-md rounded-xl p-6 
        relative overflow-hidden
        border border-white/60
        shadow-[0_8px_30px_rgb(0,0,0,0.04)]
        hover:shadow-[0_15px_35px_rgb(0,0,0,0.08)]
        hover:bg-white/80
        transition-[background,shadow] duration-500">
        
        <div class="relative z-10">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center space-x-3">
            <div class="p-2 rounded-xl bg-[rgba(147,197,253,0.2)]
                transition-colors duration-300">
                <span class="text-xl">{{ hotSearchData.icon }}</span>
            </div>
            <h3 class="text-[15px] font-medium text-gray-700">{{ hotSearchData.title }}</h3>
            </div>
            <!-- 换一批按钮 -->
            <button @click="refreshHotItems"
            class="group relative px-4 py-2 rounded-xl
            bg-gradient-to-r from-blue-500/80 to-blue-600/80
            hover:from-blue-600/90 hover:to-blue-700/90
            text-white/90 hover:text-white
            transition-all duration-300 text-sm font-medium
            shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30
            active:scale-95
            overflow-hidden">
            <!-- 光效 -->
            <div class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100
                transition-opacity duration-500">
                <div class="absolute inset-0 
                bg-[radial-gradient(circle_at_50%_-20%,rgba(255,255,255,0.3),transparent_70%)]"></div>
                <div class="absolute -inset-[1px] bg-gradient-to-r from-transparent via-white/30 to-transparent
                blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500
                animate-shimmer"></div>
            </div>
            <!-- 按钮内容 -->
            <div class="relative z-10 flex items-center">
                <svg class="w-4 h-4 mr-2 transition-transform duration-500 group-hover:rotate-180" 
                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                <span>换一批</span>
            </div>
            </button>
        </div>

        <!-- 搜索项网格 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <div v-for="item in hotSearchItems" :key="item.id"
            @click="handleHotItemClick(item)"
            class="group/item p-4 
            rounded-xl backdrop-blur-md 
            relative overflow-hidden
            bg-gradient-to-b from-white/95 to-white/90
            border border-white/60
            shadow-[0_8px_20px_rgb(0,0,0,0.08)]
            hover:shadow-[0_12px_30px_rgb(0,0,0,0.12)]
            hover:bg-gradient-to-b hover:from-white hover:to-white/95
            hover:-translate-y-1
            transition-all duration-500
            cursor-pointer">
            
            <!-- hover状态背景 -->
            <div class="absolute inset-0 bg-[rgba(147,197,253,0.9)] opacity-0 
                group-hover/item:opacity-100 transition-opacity duration-300 rounded-xl">
                <div class="absolute -inset-[1px] rounded-xl border-[2.5px] border-white"></div>
                <div class="absolute inset-0 bg-gradient-to-b from-white/50 to-transparent"></div>
            </div>
            
            <div class="relative z-10">
                <p class="text-[15px] text-gray-600 group-hover/item:text-gray-800 
                transition-colors duration-300">
                {{ item.title }}
                </p>
                <div class="mt-2 flex items-center justify-between text-xs text-gray-400">
                <span class="group-hover/item:text-gray-600 flex items-center">
                    <span class="mr-1 relative">
                    <span class="animate-pulse">🔥</span>
                    <!-- 火焰光效 -->
                    <div class="absolute -inset-1 bg-orange-400/20 blur-sm rounded-full
                        opacity-0 group-hover/item:opacity-100 transition-opacity duration-300"></div>
                    </span>
                    热度: {{ item.hot }}
                </span>
                <span class="group-hover/item:text-gray-600">{{ item.category }}</span>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
    </div>
  </div>
</template>

<style>
/* 保持原有样式 */
</style> 